<template>
  <n-layout has-sider :native-scrollbar="false" class="layout" style="background: #f2f2f2;">
    <n-layout-content style="background: transparent">
      <div :style="{border: 1+' solid #ccc'}">
        <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editorRef"
            :defaultConfig="toolbarConfig"
            :mode="mode"
            class="toolbar"
        />
      </div>
      <n-grid x-gap="12" cols="12" class="write-grig">
        <n-gi :offset="1" :span="2" >
          <n-card>
            "学习不是为了达到目的地，而是为了享受旅途中的每一个发现。每一页书，每一堂课，都是通向更广阔世界的门扉。"
            <br/>
            <br/>
            "知识就像星辰，越是探索，越会发现自己的渺小与宇宙的浩瀚。别怕未知，正是这些未知让学习变得意义非凡。"
            <br/>
            <br/>
            "在学习的道路上，挑战与困难是成长的催化剂。记住，最陡峭的山峰之后，往往藏着最壮丽的风景。坚持下去，你的努力终将开花结果。"
          </n-card>
        </n-gi>
        <n-gi  :span="8">
          <n-card>
            <n-form>

            </n-form>
            <Editor
                :style="{'min-height': '72vh','overflow-y': 'hidden'}"
                v-model="valueHtml"
                :defaultConfig="editorConfig"
                :mode="mode"
                @onCreated="handleCreated"
            />
          </n-card>
        </n-gi>
      </n-grid>
    </n-layout-content>
    <n-flex class="write-posts-footer" align="center">

      <!--      <n-button>存为草稿</n-button>-->
      <n-button @click="fabuClick">预览</n-button>
      <n-button>重置</n-button>
      <n-button type="info" @click="getContentHtml">{{ globalName }}</n-button>
    </n-flex>
  </n-layout>
</template>

<script setup>
import {ref, defineProps, shallowRef, onBeforeUnmount, toRefs} from 'vue'
import {useRoute} from "vue-router";
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import {createNote, getNoteByNoteId, saveNote} from "@/res/api/note_api.js";
import {createBlog} from "@/res/api/blog_api.js";
//导出组件名称
defineExpose({
  name:'write-communal'
})
// 路由传参
const route = useRoute()
let {query} = toRefs(route)
// 转换全局名称
let globalName = ref('发布文章')
let valueHtml = ref('')
function getNote(){
  getNoteByNoteId(
      {noteId:query.value.noteId}
  ).then(res=> {
    // console.log(res.data)
    if (res.data.notejson === null || res.data.notejson === undefined || res.data.notejson === ''){
      res.data.notejson = ''
    }
    valueHtml.value = res.data.notejson
  }).catch(err=> {
    $message.error(err.messages)
  })
}
// 判断类型进行渲染
if (query.value.type === 'note'){
  globalName.value = '保存笔记'
  getNote()
}
else if (query.value.type === 'posts'){
  globalName.value = '发布文章'
}

// 获取文章内容
function getContentHtml() {
  // console.log(valueHtml.value)
  if (globalName.value === '保存笔记'){
    saveNote(
        {
          noteId:query.value.noteId,
          noteJson:valueHtml.value,
          noteTitle:query.value.noteTitle,
        }
    ).then(res=> {
      console.log(res.data)
      // 重新渲染
      location.reload()
    }).catch(err=> {
      $message.error(err.messages)
    })
  }
  else if (globalName.value === '发布文章'){
    createBlog(
        {
          title: globalName.value,
          content: valueHtml.value,
        }
    ).then(res=> {
      console.log(res)
      $message.success(res.message)
      // 重新渲染
      location.reload()
    }).catch(err=> {
      $message.error(err.messages)
    })
  }
}

// 发布文章/保存笔记
function fabuClick() {
  $message.destroyAll()
  $message.success('正在预览')
}
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
const mode = 'default'
//工具栏配置
const toolbarConfig = {

}
//编辑器配置
const editorConfig = {
  placeholder: '请输入内容...',
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})
const handleCreated = (editor) => {
  // 记录 editor 实例，重要！
  editorRef.value = editor
}
</script>

<style lang="scss" scoped>
.toolbar{
  background: #fff;
  height: 3.2rem;
}
.write-grig{
  margin-top: 2rem;
}
.write-posts-footer{
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 3.6rem;
  background: #f8fafc;
  border-top: 1px solid #e6ebf5;
  padding-left: 64%;
  //  添加鼠标悬浮阴影
  box-shadow: 0 -2px 4px rgba(0, 0, 0, .12), 0 -2px 10px rgba(0, 0, 0, .04);
}
</style>
